<template>
  <div id='wrap'>
    <h1>axios实例封装</h1>
    <button class="btn-id" @click="getRolesPageHandler">请求角色分页列表</button>
    <button class="btn-id" @click="postRolesHandler">角色新增功能</button>
    <button class="btn-id" @click="putRolesHandler">角色修改功能</button>
    <button class="btn-id" @click="deleteRolesHandler">角色删除功能</button>
    <button class="btn-id" @click="patchRolesHandler">角色禁用功能</button>
    <div v-if="roles && roles.length>0">
      <div v-for="item in roles" :key="item.id" class="box">
        <span>角色ID:{{ item.id }}</span>
        <span>角色名称:{{ item.name }}</span>
        <span>角色编码:{{ item.code }}</span>
        <span>排序:{{ item.sort }}</span>
        <span>角色状态:{{ item.status }}-正常</span>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu44',
}
</script>

<script lang='ts' setup>
import { ref,onMounted } from "vue";
import { type RolesType,requestGetRolesPage,addRole,editRole,editRolesStatus,deRole } from "@/service/day20250109/scu44";
onMounted(()=>{
  getRolesPageHandler()
})
const roles=ref<RolesType[]>([])
const getRolesPageHandler=async()=>{
  try{
    const res=await requestGetRolesPage({pageNum:1,pageSize:100})
    console.log(res.data);
    roles.value=res.data.list
  }catch(error){
    console.error('获取角色分页数据失败:' + error);
  }
}

const postRolesHandler=async()=>{
  const newRole={
    name:'小黑子施雅典',
    code:'132',
    sort:330,
    status:1,
  }
  const res=await addRole(newRole)
  console.log(res.data);
  getRolesPageHandler()
}

const putRolesHandler=()=>{
  const raw={
    name:'小黑子你干嘛哎哟',
    code:'139',
    sort:903,
    status:1,
  }
  editRole('1046',raw)
  getRolesPageHandler()
}

const deleteRolesHandler=async()=>{
  deRole('1046')
  getRolesPageHandler()
}

const patchRolesHandler=async()=>{
  editRolesStatus('1046',2)
  getRolesPageHandler()
}

</script>

<style scoped lang='scss'>
.btn-id {
  padding: 5px;
  font-weight: bold;

  font-size: 14px;
}
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  span {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #409eff;
    background-color: #40e2ff;
  }
}
</style>
